<template>
  <div>
    <!-- 头部操作栏 start -->
    <el-button type="primary"
      icon="el-icon-plus"
      style="margin-bottom:10px"
      size="small"
      @click="handleAdd">新增</el-button>
    <!-- 头部操作栏 end -->

    <!-- 数据表格 start -->
    <el-table v-loading="loading"
      :data="list">
      <el-table-column label="权重" sortable prop="weight"/>
      <el-table-column label="兑换物名称" prop="exch_name"/>
      <el-table-column label="兑换内容" min-width="160">
        <template slot-scope="scope">
          <pre>{{ scope.row | parseExchCont}}</pre>
        </template>
      </el-table-column>
      <el-table-column label="消耗金币" prop="consum_speceis"/>
      <el-table-column label="图片" min-width="100">
        <template slot-scope="scope">
          <el-image slot="reference"
            style="height: 36px;cursor: pointer;"
            :src="scope.row.image_url"
            fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作"
        width="150"
        fixed="right"
        class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleUpdate(scope.row)">修改</el-button>
          <el-button
            size="small"
            type="text"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据表格 end -->

    <!-- 添加或修改对话框 start -->
    <el-dialog :title="title"
      :visible.sync="open"
      width="550px"
      :close-on-click-modal="false">
      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="150px">

        <el-form-item label="兑换物" prop="exch_type">
          <el-select v-model="form.exch_type">
            <el-option
              label="权益时长"
              :value="1" />
            <!-- <el-option
              label="折扣卡"
              :value="2" /> -->
          </el-select>
        </el-form-item>

        <el-form-item label="兑换物名称" prop="exch_name">
          <el-input v-model.trim="form.exch_name"/>
        </el-form-item>

        <el-form-item label="时长" prop="duration">
          <el-input-number v-model="form.duration" :precision="0" :min="0"/>
          <el-select v-model="form.duration_type" style="width: 100px;margin-left: 10px;">
            <el-option
              label="天"
              :value="3" />
            <el-option
              label="小时"
              :value="2" />
            <el-option
              label="分钟"
              :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="消耗金币" prop="consum_speceis">
          <el-input-number v-model="form.consum_speceis" :precision="0" :min="0"/> 个
        </el-form-item>

        <el-form-item label="图片" prop="image_url">
          <ImgUpload v-model="form.image_url"/>
        </el-form-item>

        <el-form-item label="权重" prop="weight">
          <el-input-number v-model="form.weight" :precision="0" :min="0"/>
        </el-form-item>

      </el-form>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForm">确 认</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改对话框 end -->
  </div>
</template>

<script>
import ImgUpload from '@/components/img-upload'
import { listExchItem, updateExchItem, delExchItem } from '@/api/activity/exchange'
export default {
  name: 'Exchange',
  components: {
    ImgUpload
  },
  data () {
    return {
      // 遮罩层
      loading: true,
      // 表格数据
      list: null,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        exch_type: 1, // 1时长 2优惠券
        exch_name: '',
        duration: 0,
        consum_speceis: 0,
        image_url: '',
        duration_type: 1,
        weight: 0
      },
      // 表单校验
      rules: {
        exch_type: [
          { required: true, message: '兑换类型不能为空', trigger: 'blur' }
        ],
        exch_name: [
          { required: true, message: '兑换物名称不能为空', trigger: 'blur' }
        ],
        duration: [
          { required: true, message: '兑换时长不能为空', trigger: 'blur' }
        ],
        consum_speceis: [
          { required: true, message: '消耗金币不能为空', trigger: 'blur' }
        ],
        image_url: [
          { required: true, message: '图片不能为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '权重不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  filters: {
    parseExchCont ({ exch_type, duration }) {
      if (exch_type === 1 && duration) {
        switch (0) {
          case duration % (60 * 24):
            return `${Math.round(duration / 60 / 24)}天会员时长`
          case duration % 60:
            return `${Math.round(duration / 60)}小时会员时长`
          default:
            return `${duration}分钟会员时长`
        }
      }
      return ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    /** 查询列表 */
    getList () {
      this.loading = true
      listExchItem().then(response => {
        this.list = response.data.list
      }).finally(() => {
        this.loading = false
      })
    },
    /** 表单重置 */
    reset () {
      this.resetForm('form')
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.title = '添加兑换物'
      this.form.id = undefined
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      const { duration } = row
      this.reset()
      this.open = true
      this.title = '修改兑换物'
      this.$nextTick(() => {
        const keys = Object.keys(this.form)
        for (const item of keys) {
          this.form[item] = row[item]
        }

        switch (0) {
          case duration % (60 * 24):
            this.form.duration = Math.round(duration / 60 / 24)
            this.form.duration_type = 3
            break
          case duration % 60:
            this.form.duration = Math.round(duration / 60)
            this.form.duration_type = 2
            break
          default:
            this.form.duration_type = 1
            break
        }
        this.form.id = row.id
      })
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs['form'].validate(valid => {
        if (!valid) return
        const params = Object.assign({}, this.form)
        switch (params.duration_type) {
          case 3:
            params.duration = Math.round(params.duration * 60 * 24)
            break
          case 2:
            params.duration = Math.round(params.duration * 60)
            break
          default:
            break
        }
        delete params.duration_type
        updateExchItem(params).then(response => {
          this.msgSuccess(`${params.id ? '修改' : '新增'}成功`)
          this.open = false
          this.getList()
        })
      })
    },
    /** 删除按钮操作 */
    handleDelete ({ id, exch_name }) {
      this.$confirm(`是否确认删除该兑换物？兑换物名称：${exch_name}`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delExchItem(id).then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
      })
    }
  }
}
</script>
<style lang="scss">
.el-table .el-image {
  /deep/.el-image__inner {
    max-height: 36px;
  }
}
</style>
